<template>
  <div class="container-content">
    <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
      <!-- :rules="rules" -->
      <el-row :gutter="15">
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="承兑协议编号"
                prop="acceptanceNumber"
              >
                <el-input
                  v-model="formData.acceptanceNumber"
                  placeholder="请输入承兑协议编号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="承兑人"
                prop="acceptanceUser"
              >
                <el-input
                  v-model="formData.acceptanceUser"
                  placeholder="请输入承兑人"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="票据(包)号"
                prop="billPackNo"
              >
                <el-input
                  v-model="formData.billPackNo"
                  placeholder="请输入票据(包)号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="票据类型"
                prop="billType"
              >
                <el-select
                  v-model="formData.billType"
                  placeholder="请选择票据类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in billTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="到期金额"
                prop="dueAmount"
              >
                <el-input
                  v-model="formData.dueAmount"
                  placeholder="请输入到期金额"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="票面金额"
                prop="faceAmount"
              >
                <el-input
                  v-model="formData.faceAmount"
                  placeholder="请输入票面金额"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="等分化票据"
                prop="isSeparate"
              >
                <el-radio-group v-model="formData.isSeparate" size="medium">
                  <el-radio
                    v-for="(item, index) in isSeparateOptions"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="签发日"
                prop="issuanceTime"
              >
                <el-date-picker
                  v-model="formData.issuanceTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择签发日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="销售组织"
                prop="saleDeptId"
              >
                <el-input
                  v-model="formData.saleDeptId"
                  placeholder="请输入销售组织"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="	结算状态"
                prop="settlementStatus"
              >
                <el-select
                  v-model="formData.settlementStatus"
                  placeholder="请选择结算状态"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in settlementStatusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="子票据包数量"
                prop="subBillNumber"
              >
                <el-input
                  v-model="formData.subBillNumber"
                  placeholder="请输入子票据包数量"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="子票据包区间"
                prop="subPackInterval"
              >
                <el-input
                  v-model="formData.subPackInterval"
                  placeholder="请输入子票据包区间"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="交易金额"
                prop="transactionAmount"
              >
                <el-input
                  v-model="formData.transactionAmount"
                  placeholder="请输入交易金额"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="承兑日期"
                prop="acceptanceTime"
              >
                <el-date-picker
                  v-model="formData.acceptanceTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请输入承兑日期"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label-width="200px" label="票据号" prop="billNo">
                <el-input
                  v-model="formData.billNo"
                  placeholder="请输入票据号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="票据流水号"
                prop="billSerialNumber"
              >
                <el-input
                  v-model="formData.billSerialNumber"
                  placeholder="请输入票据流水号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="数据状态"
                prop="dataStatus"
              >
                <el-select
                  v-model="formData.dataStatus"
                  placeholder="请选择数据状态"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in dataStatusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="200px" label="到期日" prop="dueTime">
                <el-date-picker
                  v-model="formData.dueTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择到期日"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="票面利率"
                prop="faceRate	"
              >
                <el-input
                  v-model="formData.faceRate"
                  placeholder="请输入票面利率"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="是否支持拆分"
                prop="isSplit"
              >
                <el-radio-group v-model="formData.isSplit" size="medium">
                  <el-radio
                    v-for="(item, index) in isSplitOptions"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="币别"
                prop="kingBaseCurrencyId"
              >
                <el-select
                  v-model="formData.kingBaseCurrencyId"
                  placeholder="请选择币别"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in kingBaseCurrencyIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="结算组织"
                prop="settlementDeptId"
              >
                <el-input
                  v-model="formData.settlementDeptId"
                  placeholder="请输入结算组织"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="子票据终止序号"
                prop="subBillEndIndex"
              >
                <el-input
                  v-model="formData.subBillEndIndex"
                  placeholder="请输入子票据终止序号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="子票据开始序号"
                prop="subBillStartIndex"
              >
                <el-input
                  v-model="formData.subBillStartIndex"
                  placeholder="请输入子票据开始序号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="出票人"
                prop="ticketingUser"
              >
                <el-input
                  v-model="formData.ticketingUser"
                  placeholder="请输入出票人"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款银行账户地址"
                prop="payBankAddress"
              >
                <el-input
                  v-model="formData.payBankAddress"
                  placeholder="请输入付款银行账户地址"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款银行账户名称"
                prop="payBankName"
              >
                <el-input
                  v-model="formData.payBankName"
                  placeholder="请输入付款银行账户名称"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="收款银行"
                prop="receiptBank"
              >
                <el-input
                  v-model="formData.receiptBank"
                  placeholder="请输入收款银行"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="收款银行地址"
                prop="receiptBankAddress"
              >
                <el-input
                  v-model="formData.receiptBankAddress"
                  placeholder="请输入收款银行地址"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="收款单位Id"
                prop="receiptDeptId"
              >
                <el-input
                  v-model="formData.receiptDeptId"
                  placeholder="请输入收款单位Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款单位类型"
                prop="receiptDeptType"
              >
                <el-select
                  v-model="formData.receiptDeptType"
                  placeholder="请选择付款单位类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in receiptDeptTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款银行账号"
                prop="payBankAccount"
              >
                <el-input
                  v-model="formData.payBankAccount"
                  placeholder="请输入付款银行账号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款银行Id"
                prop="payBankId"
              >
                <el-input
                  v-model="formData.payBankId"
                  placeholder="请输入付款银行Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="付款组织Id"
                prop="payDeptId"
              >
                <el-input
                  v-model="formData.payDeptId"
                  placeholder="请输入付款组织Id"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="收款银行账号"
                prop="receiptBankAccount"
              >
                <el-input
                  v-model="formData.receiptBankAccount"
                  placeholder="请输入收款银行账号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="200px"
                label="收款银行名称"
                prop="receiptBankName"
              >
                <el-input
                  v-model="formData.receiptBankName"
                  placeholder="请输入收款银行名称"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { addInfo, editInfo, getDetail } from "@/api/finance/receivebill";
import { receiveStatus } from "../../common";
import { getBankList } from "@/api/finance/bank.js";
export default {
  props: ["rowId"],
  data() {
    return {
      formData: {
        acceptanceNumber: "",
        acceptanceTime: "",
        acceptanceUser: "",
        billNo: "",
        billPackNo: "",
        billSerialNumber: "",
        billType: "",
        createBy: "",
        createTime: "",
        dataStatus: "",
        dueAmount: "",
        dueTime: "",
        faceAmount: "",
        faceRate: "",
        id: "",
        isSeparate: "",
        isSplit: "",

        issuanceTime: "",
        kingBaseCurrencyId: "",
        params: {},
        parentId: "",
        payBank: "",
        payBankAccount: "",
        payBankAddress: "",
        payBankName: "",
        payDeptId: "",
        payDeptType: "",
        payTerm: "",
        receiptBankAccount: "",
        receiptBankAddress: "",
        receiptBankId: "",
        receiptBankName: "",
        receiptDeptId: "",
        receiveTime: "",
        remark: "",
        remarks: "",
        saleDeptId: "",
        searchValue: "",
        settlementDeptId: "",
        settlementStatus: "",
        subBillEndIndex: "",
        subBillNumber: "",
        subBillStartIndex: "",
        subPackInterval: "",
        ticketingUser: "",
        transactionAmount: "",
        updateBy: "",
        updateTime: "",
      },
      // rules: {
      //     acceptanceNumber: [
      //         {
      //             required: true,
      //             message: "请输入承兑协议编号",
      //             trigger: "blur",
      //         },
      //     ],
      //     acceptanceUser: [
      //         {
      //             required: true,
      //             message: "请输入承兑人",
      //             trigger: "blur",
      //         },
      //     ],
      //     billPackNo: [
      //         {
      //             required: true,
      //             message: "请输入票据(包)号",
      //             trigger: "blur",
      //         },
      //     ],
      //     billType: [
      //         {
      //             required: true,
      //             message: "请选择票据类型",
      //             trigger: "change",
      //         },
      //     ],
      //     dueAmount: [
      //         {
      //             required: true,
      //             message: "请输入到期金额",
      //             trigger: "blur",
      //         },
      //     ],
      //     faceAmount: [
      //         {
      //             required: true,
      //             message: "请输入票面金额",
      //             trigger: "blur",
      //         },
      //     ],
      //     isSeparate: [
      //         {
      //             required: true,
      //             message: "等分化票据不能为空",
      //             trigger: "change",
      //         },
      //     ],
      //     issuanceTime: [
      //         {
      //             required: true,
      //             message: "请选择签发日",
      //             trigger: "change",
      //         },
      //     ],
      //     saleDeptId: [
      //         {
      //             required: true,
      //             message: "请输入销售组织",
      //             trigger: "blur",
      //         },
      //     ],
      //     settlementStatus: [
      //         {
      //             required: true,
      //             message: "请选择结算状态",
      //             trigger: "change",
      //         },
      //     ],
      //     subBillNumber: [
      //         {
      //             required: true,
      //             message: "请输入子票据包数量",
      //             trigger: "blur",
      //         },
      //     ],
      //     subPackInterval: [
      //         {
      //             required: true,
      //             message: "请输入子票据包区间",
      //             trigger: "blur",
      //         },
      //     ],
      //     transactionAmount: [
      //         {
      //             required: true,
      //             message: "请输入交易金额",
      //             trigger: "blur",
      //         },
      //     ],
      //     acceptanceTime: [
      //         {
      //             required: true,
      //             message: "请输入承兑日期",
      //             trigger: "blur",
      //         },
      //     ],
      //     billNo: [
      //         {
      //             required: true,
      //             message: "请输入票据号",
      //             trigger: "blur",
      //         },
      //     ],
      //     billSerialNumber: [
      //         {
      //             required: true,
      //             message: "请输入票据流水号",
      //             trigger: "blur",
      //         },
      //     ],
      //     dataStatus: [
      //         {
      //             required: true,
      //             message: "请输入数据状态",
      //             trigger: "blur",
      //         },
      //     ],
      //     dueTime: [
      //         {
      //             required: true,
      //             message: "请选择到期日",
      //             trigger: "change",
      //         },
      //     ],
      //     faceRate: [
      //         {
      //             required: true,
      //             message: "请输入票面利率",
      //             trigger: "blur",
      //         },
      //     ],
      //     isSplit: [
      //         {
      //             required: true,
      //             message: "是否支持拆分不能为空",
      //             trigger: "change",
      //         },
      //     ],
      //     kingBaseCurrencyId: [
      //         {
      //             required: true,
      //             message: "请选择币别",
      //             trigger: "change",
      //         },
      //     ],
      //     settlementDeptId: [
      //         {
      //             required: true,
      //             message: "请输入结算组织",
      //             trigger: "blur",
      //         },
      //     ],
      //     subBillEndIndex: [
      //         {
      //             required: true,
      //             message: "请输入子票据终止序号",
      //             trigger: "blur",
      //         },
      //     ],
      //     subBillStartIndex: [
      //         {
      //             required: true,
      //             message: "请输入子票据开始序号",
      //             trigger: "blur",
      //         },
      //     ],
      //     ticketingUser: [
      //         {
      //             required: true,
      //             message: "请输入出票人",
      //             trigger: "blur",
      //         },
      //     ],
      // },
      billTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      isSeparateOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      dataStatusOptions: [
        {
          label: "创建",
          value: 1,
        },
        {
          label: "审核中",
          value: 2,
        },
        {
          label: "已审核",
          value: 3,
        },
      ],
      receiptDeptTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      isSplitOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      kingBaseCurrencyIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
    };
  },
  computed: {
    settlementStatusOptions() {
      const settlementStatusList = [];
      for (const item of Object.values(receiveStatus)) {
        if (item.type) {
          settlementStatusList.push({
            label: item.label,
            value: item.type,
          });
        }
      }
      return settlementStatusList;
    },
  },
  methods: {
    submit(cb) {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        if (this.rowId) {
          editInfo(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              cb();
            }
          });
        } else {
          addInfo(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "新增成功！",
                type: "success",
              });
              cb();
            }
          });
        }
      });
    },
  },
  mounted() {
    this.getDicts("king_currency_type").then((res) => {
      this.kingBaseCurrencyIdOptions = res.data.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
    });
    getBankList().then((res) => {});
    if (this.rowId) {
      console.log("rowId", this.rowId);
      getDetail(this.rowId).then((res) => {
        if (res.code === 200) {
          this.formData = {
            ...this.formData,
            ...res.data.kingFinanceReceiptBillEntity,
          };
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
</style>
